 <template>
 	<view class="container">
 		<view class="navbar">
 			<navbar ref="navbar" :config="config" backColor="#000"></navbar>
 			<view class="goodsProduct">

 				<view class="item-productsBottom" @click="goProductDetails(item.id, item.point_goods)"
 					v-for="item in goodsList" :key="item.id">
 					<image class="u-goods336" :src="item.cover" mode=""
					style="border-top-left-radius:19rpx;border-top-right-radius:19rpx"
					></image>
 					<view class="botbox">
 						<view class="botboxTitle" >{{ item.title }}
 						</view>
 						<!-- <view class="u-font20 u-999 u-mt5">已售<text class="u-FF0000">{{item.result_sale_num}}</text>件</view> -->
 						<view class="min_sale_price" v-if="!item.point_goods">
 							<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
 						</view>
 						<view class="min_sale_price" v-else>
 							{{ item.min_exchange_point }}积分
 						</view>
 						<view class="collcatView" style="width: 100%;">
 							<text class="collcatViewOne">已有{{item.collect_sum}}人收藏</text>
 							
							<image :src="imgUrl+'/research/redStatr.png'" class="redStatr"></image>
							
 						</view>
						
 					</view>
 				</view>
 			</view>
 			<loadMore v-if="goodsList && goodsList.length > 0" :status="status"></loadMore>
 			<nodata v-else :config="{ top: 15, content: '暂无商品~' }"></nodata>
 		</view>
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
 				config: {
 					back: true, //false是tolbar页面 是则不写
 					title: '我的收藏',
 					color: '#000',
 					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
 					backgroundColor: [1, "#fff"],
 					statusBarFontColor: '#1A1A1A',
 					backIconColor: "#000"
 				},
 				goodsList: [],
 				params: {
 					page: 1,
 					limit: 10,
 				},
 				imgUrl: this.$mConfig.staticUrl
 			};
 		},
 		onShow() {
 			this.params.page = 1;
 			this.goodsList = [];
 			this.getList();
 		},
 		onReachBottom() {
 			this.status = "loading";
 			this.params.page++;
 			this.getList();
 		},

 		onPullDownRefresh() {
 			this.params.page = 1;
 			this.goodsList = [];
 			this.getList();
 			uni.stopPullDownRefresh();
 		},
 		methods: {
 			getList() {
 				this.$http.get(`/collect/goods/list`, this.params).then((res) => {
 					if (res && res.code == 200) {
 						this.goodsList = this.goodsList.concat(res.page.list);
 						if (res.page.totalPage <= res.page.currPage) {
 							this.status = "noMore";
 						} else {
 							this.status = "more";
 						}
 					}
 				});
 			},
 			goProductDetails(id, type) {
 				if (type) {
 					uni.navigateTo({
 						url: "/pages/product/goods/IntegralGood?id=" + id,
 					});
 				} else {
 					uni.navigateTo({
 						url: "/pages/product/goods/goods?id=" + id,
 					});
 				}
 			},
 		},
 	};
 </script>
 <style>
 	page {
 		background-color: #F4F4F4;
 	}
 </style>

 <style lang="scss" scoped>
 	.love-color {
 		width: 40rpx;
 		height: 40rpx;
 	}

 	.goodsProduct {
 		margin: 19rpx;
 		background: #F9F9F9;
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
 		flex-wrap: wrap;
 		width: 711rpx;
 		box-sizing: border-box;
 	}

 	.item-productsBottom {
 		margin-bottom: 19rpx;
 		width: 346rpx;
 		height: auto;
 		background: #FFFFFF;
 		border-radius: 19rpx;

 		.botbox {}
 	}

 	.u-goods336 {
 		width: 346rpx;
 		height: 356rpx;
 	}

 	page {
 		background-color: #fff;
 	}

 	.botboxTitle {
 		font-weight: 400;
 		font-size: 25rpx;
 		color: #333333;
 		line-height: 27rpx;
 		text-align: justified;
 		font-style: normal;
 		text-transform: none;
 		width: 323rpx;
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		-o-text-overflow: ellipsis;
		height: auto;
		margin-top: 19rpx;
		margin-bottom: 19rpx;
		padding-left: 11rpx;
 	}
	.min_sale_price{
		font-weight: bold;
		font-size: 27rpx;
		color: #FF211F;
		line-height: 27rpx;
		padding-left: 11rpx;
	}
	.collcatView{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 19rpx;
		padding-bottom: 19rpx;
		padding-left: 11rpx;
		padding-right: 11rpx;
		.collcatViewOne{
			font-weight: 400;
			font-size: 19rpx;
			color: #BCBCBC;
		}
		.collcatViewTwo{
			
		}
	}
	.redStatr{
		width: 23rpx;
		height: 23rpx;
	}
 </style>